<template>
  <div>
    <div>
      <div class="headerInfo ">
      <el-row :gutter="18">
            <el-col :span="16" class="voiceStyle">
              <div>
                <img src="/images/voice.png" alt="" width="15px">
                <span style="color:#2575FC">最新发布</span>
                <span style="color:#738095;margin:0 10px;">|</span>
                <span style="color:#738095;">情况开始反转，鸿蒙OS或将无法兼容安卓？内行人指出关键！<span style="float:right;margin-right:10px;">2022年3月15日</span></span>
              </div>
            </el-col>
           
            <el-col :span="8" class="history" >
              <span>
                <i
                  class="icon-gwshijian"
                  style="font-size: 10px; padding-left: 15px"
                ></i>
                上次登录 2020-03-01 17:23 1天前</span
              >
            </el-col>
          </el-row>
          </div>
    </div>
    <el-row :gutter="10">
      <el-col :span="14" class="limiteWidths">
        <div class="grid-content bg-purple">
          <el-card class="box-card" shadow="always">
            <div>
              <el-row :gutter="18">
                <el-col :span="8">
                  <h4>我的工作数据</h4>
                </el-col>
                <el-col :span="8">
                  <div class="title">
                    <span class="active">任务</span>
                    <span>邮件</span>
                    <span>审批</span>
                  </div>
                </el-col>
                <el-col :span="8" style="text-align: right">
                  <el-select
                    placeholder="数据权限"
                    clearable
                    value="本周"
                    style="width: 120px"
                  >
                    <el-option label="本周" value="本周"></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <div id="myWork" style="width: 100%; height: 200px"></div>
          </el-card>
          <el-card class="box-card" shadow="always">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane
                :label="item.label"
                :name="item.label"
                :key="index"
                v-for="(item, index) in tablist"
              >
                {{ item.label }}
                <!-- <i class="el-icon-tickets" style="font-size:30px;color:#999"></i>
                <span style="color:#999;font-size:20px;margin-left:10px;">添加{{item.label}} . . .</span> -->
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <el-card class="box-card" shadow="always">
            <el-tabs v-model="activeTag">
              <el-tab-pane
                :label="item.label"
                :name="item.label"
                :key="index"
                v-for="(item, index) in listTag"
              >
                <template v-if="item.children">
                  <div
                    v-for="(items, indexs) in item.children"
                    :key="indexs"
                    class="listTag"
                  >
                    <span class="dotted"></span>
                    <span>{{ items.content }}</span>
                    <span style="float: right">{{ items.time }}</span>
                  </div>
                </template>
              </el-tab-pane>
            </el-tabs>
          </el-card>
          <el-card class="box-card" shadow="always">
            <h4>最近使用</h4>
            <el-tag
              v-for="(item, index) in tag"
              :key="index"
              :type="item.type"
              effect="plain"
            >
              {{ item.label }}
            </el-tag>
          </el-card>
        </div>
      </el-col>
      <el-col :span="10" class="limiteWidth">
        <div style="position:relative;height:365px" >
          <div class="idStyle">
          <el-row>
            <el-col :span="4">
              <el-avatar :size="50" src="https://empty">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
            </el-col>
            <el-col :span="16">
              <div class="baseInfo" style="margin-bottom: 10px">
                张妍 | 女 | 管理员 | 15000758251
              </div>

              <div class="rateWork">
                <span class="dottedHead"><img src="/images/heard.png" alt="" style="vertical-align: text-top;
    margin-top: 1px;"></span>
                工作评分：91 >
              </div>
              <el-row>
                <el-col :span="12">
                  <div class="base">当年工时</div>
                  <div class="time">
                    <span>38,367</span>
                    小时
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="base">本月工时</div>
                  <div class="mothTime"><span>38,367</span> 小时</div>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="4" style="margin-top: 15px"> 个人信息 > </el-col>
          </el-row>
          </div>
          <div  style="margin-top:-40px;position:absolute;width:100%;" >
          <el-card class=" infoTotal" style="width:93%;margin:0 auto;">
          <div class="totalInfo">信息汇总</div>
          <el-row :gutter="15" class="info">
            <el-col :span="6">
              <div class="border">
                <div class="email common">
                  <span>
                    <img src="/images/email.png" alt="" />
                  </span>
                </div>
                <div>邮件</div>
                <div>
                  <span>48</span>
                  email
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="border">
                <div class="tags common">
                  <span>
                    <img src="/images/tags.png" alt="" />
                  </span>
                </div>
                <div>任务</div>
                <div>
                  <span>6</span>
                  task
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="border">
                <div class="message common">
                  <span>
                    <img src="/images/message.png" alt="" />
                  </span>
                </div>
                <div>消息</div>
                <div>
                  <span>8</span>
                  News
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="border">
                <div class="notice common">
                  <span>
                    <img src="/images/notice.png" alt="" />
                  </span>
                </div>
                <div>通知</div>
                <div>
                  <span>4</span>
                  Notice
                </div>
              </div>
            </el-col>
          </el-row>
        </el-card>
        </div>
        </div>
        
        <el-card class="box-card" shadow="always">
          <!-- <el-row :gutter="18">
            <el-col :span="5">
              <el-avatar :size="50" src="https://empty">
                <img
                  src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                />
              </el-avatar>
            </el-col>
            <el-col :span="4" style="margin-top: 20px">
              <span>张明</span>
            </el-col>
            <el-col :span="15" class="history" style="margin-top: 20px">
              <span>
                <i
                  class="icon-gwshijian"
                  style="font-size: 10px; padding-left: 15px"
                ></i>
                上次登录 2020-03-01 17:23 1天前</span
              >
            </el-col>
          </el-row> -->

          <el-row class="task">
            <el-col :span="12">
              <span class="cardTitle" >任务栏</span>
            </el-col>
            <el-col :span="12" style="text-align: right">
              <el-date-picker
                type="month"
                format="yyyy 第 WW 周"
                placeholder="选择周"
                style="width: 120px"
              >
              </el-date-picker>
            </el-col>
          </el-row>
          <div class="dashed"></div>
          <el-row class="canclder">
            <el-col :span="3" v-for="(item, index) in timeList" :key="index" >
              <div class="dataStyle">
              <div class="week">{{ item.week }}</div>
              <div class="day">{{ item.day }}</div>
              </div> 
            </el-col>
          </el-row>
          <div class="info isactive" style="margin: 20px">
            <el-row class="border" :gutter="20">
              <el-col :span="6" class="iconStyle">
                <i
                  class="icon-gwxunjianrenwuguanli"
                  style="font-size: 46px"
                ></i>
              </el-col>
              <el-col :span="12" class="contentStyle">
                <span>任务中心</span>
                <div>快速查看任务计划</div>
              </el-col>
              <el-col :span="6">
                <span class="border goto">></span>
              </el-col>
            </el-row>
          </div>
          <div class="info isactive" style="margin: 20px">
            <el-row class="border" :gutter="20">
              <el-col :span="6" class="iconStyle">
                <i class="icon-gwlaba" style="font-size: 46px"></i>
              </el-col>
              <el-col :span="12" class="contentStyle">
                <span>设备维修</span>
                <div>T3983设备维修</div>
              </el-col>
              <el-col :span="6">
                <span class="border goto">></span>
              </el-col>
            </el-row>
          </div>
        </el-card>
        <el-card class="box-card" shadow="always"> 
          <div class="fapiao">
            <span class="titleLine"></span>
            <span class="cardTitle" >开票信息</span>
            <img src="/images/refresh.png" alt="" width="15px">
            <img src="/images/fullscreen.png" alt="">
          </div>
          <div class="ticketTitle">
            格物智能系统有限公司
          </div>
          <div class="ticketInfoList">
            <img src="/images/dotted.png" alt="">
            <span>单位名称：</span>
            <span>格物智能系统有限公司</span>
          </div>
          <div class="ticketInfoList">
            <img src="/images/dotted.png" alt="">
            <span>单位地址：</span>
            <span>重庆市江津区23号</span>
          </div>
          <div class="ticketInfoList">
            <img src="/images/dotted.png" alt="">
            <span>开户银行：</span>
            <span>建设银行重庆支行</span>
          </div>
          <div class="ticketInfoList">
            <img src="/images/dotted.png" alt="">
            <span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
            <span>1927381893719312</span>
          </div>
          <div class="ticketInfoList">
            <img src="/images/dotted.png" alt="">
            <span>税&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
            <span>2342kjhjxd234924kls9203842374</span>
          </div>
          <div class="ticketInfoList">
            <img src="/images/dotted.png" alt="">
            <span>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
            <span>400-9234-298</span>
          </div>
          <div class="dashed"></div>
           <div class="fapiao">
            <span class="titleLine"></span>
            <span class="cardTitle" >付款信息</span>
           <img src="/images/refresh.png" alt="" width="15px">
            <img src="/images/fullscreen.png" alt="">
          </div>
           <div class="ticketTitle">
            公司付款信息
          </div>
          <div class="ticketInfoList">
            <img src="/images/dotted.png" alt="">
            <span>开户银行：</span>
            <span>建设银行重庆支行</span>
          </div>
          <div class="ticketInfoList">
            <img src="/images/dotted.png" alt="">
            <span>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号：</span>
            <span>1927381893719312</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";
import { myWork } from "@/util/echartsAll";
export default {
  name: "gwcenter",
  data() {
    return {
      chooseName: "",
      activeName: "备忘录",
      tablist: [
        {
          label: "备忘录",
        },
        {
          label: "通讯录",
        },
        {
          label: "流程",
        },
      ],
      activeTag: "公告",
      listTag: [
        {
          label: "公告",
          children: [
            {
              content: "升级用户太多？荣耀鸿蒙系统开始加量增推，你们收到了吗？",
              time: "2021",
            },
             {
              content: "升级用户太多？荣耀鸿蒙系统开始加量增推，你们收到了吗？",
              time: "2021",
            },
             {
              content: "升级用户太多？荣耀鸿蒙系统开始加量增推，你们收到了吗？",
              time: "2021",
            },
             {
              content: "升级用户太多？荣耀鸿蒙系统开始加量增推，你们收到了吗？",
              time: "2021",
            },
             {
              content: "升级用户太多？荣耀鸿蒙系统开始加量增推，你们收到了吗？",
              time: "2021",
            },
          ],
        },
        {
          label: "通知",
        },
        {
          label: "新闻",
        },
        {
          label: "规章",
        },
        {
          label: "文化",
        },
        {
          label: "技术",
        },
      ],
      tag: [
        { type: "", label: "进行中工业SCADA | MJ  V1.0.1" },
        { type: "success", label: "IOT-HUB | MJ  V1.0.1" },
        { type: "info", label: "MDC | MJ  V1.0.1" },
        { type: "danger", label: "IOT-HUB | MJ  V1.0.1" },
        { type: "warning", label: "进行中工业SCADA | MJ  V1.0.1" },
      ],
      timeList: [
        {
          week: "周日",
          day: "20",
        },
        {
          week: "周六",
          day: "21",
        },
        {
          week: "周五",
          day: "21",
        },
        {
          week: "周四",
          day: "21",
        },
        {
          week: "周三",
          day: "21",
        },
        {
          week: "周二",
          day: "21",
        },
        {
          week: "周一",
          day: "21",
        },
      ],
    };
  },
  mounted() {
    const mycharts = this.$echarts.init(document.getElementById("myWork"));
    myWork(mycharts);
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>
<style scoped="scoped" lang="scss">
::v-deep .topSearch {
  .el-icon-search {
    color: #3ba5ff;
  }
  .el-icon-date {
    color: #3ba5ff;
  }
  .el-card__body {
    padding: 5px 0 !important;
  }
}
.box-card {
  margin-top: 10px;
  box-shadow: 0px 0px 7px 0px #eff2f5;
  h4 {
    margin-top: 5px;
  }
  .el-select {
    margin-top: 5px;
  }
  .el-tag--small {
    margin: 10px;
  }
  
}
.title {
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  display: inline-block;
  padding: 9px;
  border: 1px solid rgba(239, 236, 255, 100);
  span {
    font-size: 12px;
    color: rgba(154, 151, 173, 100);
    margin: 5px;
    cursor: pointer;
  }
  .active {
    background-color: #52b7f5;
    color: white;
    padding: 8px 5px;
    border-radius: 3px;
  }
}
.history {
  text-align: right;
  padding: 13px 0;
    display: inline-block;
  span {
    color: #b6b6b6;
    font-size: 12px;
    
  }
}
.info {
  .border {
    border: 1px solid #e0def3;
    border-radius: 10px;
    cursor: pointer;
    div {
      color: #aaa6c8;
      margin: 15px 0 10px;
      text-align: center;
      font-size: 12px;
      span {
        color: #352d7e;
        font-size: 14px;
        font-weight: bold;
      }
    }
    .iconStyle {
      text-align: right;
    }
    .contentStyle {
      text-align: left;
      div {
        text-align: left;
      }
    }
    .goto {
      line-height: 46px;
      width:46px;
      display: block;
    }
  }
}
::v-deep.infoTotal {
  .el-card__body {
    padding-top: 10px;
  }
  .totalInfo {
    color: #101010;
    margin: 0 0 10px;
  }
}
.idStyle {
  background-color: #26ae61;
  border-radius: 10px;
  padding: 20px;
  border: 1px solid #26ae61;
  color: white;
  height: 210px;
  margin-top: 10px;
  .baseInfo {
    font-size: 12px;

    // font-weight: bold;
  }
  .title {
    line-height: 30px;
  }

  .time {
    margin: 15px 0 0px;
    span {
      font-size: 24px;
    }
  }
  .mothTime {
    margin: 15px 0 0px;
    span {
      font-size: 24px;
    }
  }
}
::v-deep .isactive:hover {
  .el-row {
    box-shadow: 0px 7px 12px 0px rgba(127, 179, 211, 45);
  }
  .border {
    background-color: #26ae61;
    i {
      color: white;
    }
    div {
      color: white;

      span {
        color: white;
      }
    }
  }
}
.task {
}
.dashed {
  margin: 10px 0;
  border-bottom: 1px dashed #bbbbbb;
}
.canclder {
  text-align: center;
  line-height: 30px;
  .el-col-3 {
    width: 14.2%;
  }
  .week {
    color: #aaa6c8;
  }
  .day {
    color: #332a7c;
    font-weight: bold;
  }
}
.listTag {
  font-size: 12px;
  margin:  10px 15px 15px 10px;
  color: #262626;
  .dotted {
    width: 6px;
    height: 6px;
    display: inline-block;
    margin-right: 20px;
   
    border-radius: 50%;
    background-color: #f25767;
  }
}
.el-tag--plain.el-tag--success {
  background-color: rgba(143, 205, 78, 0.1);
  color: #8fcd4e;
  border: none;
}
.el-tag--plain.el-tag--info {
  background-color: #f0f8ff;
  color: #52b7f5;
  border: none;
}
.el-tag--plain.el-tag--danger {
  background-color: rgba(239, 134, 101, 0.1);
  color: #ef8665;
  border: none;
}
.email span {
  border: 1px solid #8fcd4e;
}
.common {
  span {
    border-radius: 5px;
    display: inline-block;
    height: 50px;
    width: 50px;
    img {
      width: 60%;
      margin-top: 8px;
    }
  }
}

.tags span {
  border: 1px solid #6dbef8;
}
.message span {
  border: 1px solid #332a7c;
}
.notice span {
  border: 1px solid #f25767;
}
::v-deep .topSearch {
  margin-top: 20px;
  .el-card__body {
    //height: 40px;
    padding: 5px 20px;
  }
  .el-input__inner {
    border: none !important;
  }
  select {
    border: none;
  }
  .el-col {
    margin-bottom: 0 !important;
  }
}
.rateWork {
  border-radius: 15px;
  background-color: rgba(230, 242, 254, 100);
  color: rgba(25, 143, 254, 100);
  width: 120px;
  height: 20px;
  line-height: 20px;
  padding-left: 5px;
  margin-bottom: 20px;
  .dottedHead {
    width: 15px;
    height: 15px;
    vertical-align: sub;
    display: inline-block;
    background-color: rgba(25, 143, 254, 100);
    text-align: center;
    border-radius: 50%;
  }
}
.titleLine{
  display: inline-block;
  width: 5px;
  height: 20px;
  background-color: #26ae61;
  margin-right: 10px;
  vertical-align: middle;
}
.fapiao img{
  width: 15px;
  vertical-align: middle;
  margin-right: 10px;
}
.ticketTitle{
  color: #101010;
  margin: 20px 0;
}
.ticketInfoList{
  color: #101010;
  margin-bottom: 15px;
  img{
    margin-right: 12px;
    width: 10px;
  }
  span{
    margin-right: 10px;
  }
}
.cardTitle{
  font-size: 14px;
  margin-right: 15px;
  color: #192730;
  display: inline-block;
    vertical-align: middle;
    margin-top: 0px;
}
.dataStyle{
  &:hover{
 background-color: #26ae61;
.week{
  color: white !important;
}
.day{
  color: white !important;
}
  }
  margin: 10px 0;
 border-radius: 5px;
  padding:5px 0;
}
::v-deep.headerInfo{
  background-color: white;
  padding: 0  20px 0 0;
  box-shadow: 0px 0px 7px 0px #eff2f5;
  .el-col{
    margin:  0;
     
  }
  img{
    vertical-align: bottom;
    margin-right: 10px;
    margin-left: 10px;
  }
.voiceStyle{
  background-color: #F0F4FF;
  border-radius: 0 30px 30px 0 ;
  margin: 0;
  div{
   padding: 13px 0;
  }
}
}
.limiteWidth{
  width: 420px;
}
.limiteWidths{
  width: calc(100% - 420px);
  .grid-content{
    margin-top: -10px;
  }
}

</style>